<template>
	<view>
		<view class="top" v-if="show">
			<view class="pswp__preloader__icn">
			  <view class="pswp__preloader__cut">
				<view class="pswp__preloader__donut"></view>
			  </view>
			</view>
			载入中...
		</view>
		<web-view  :webview-styles="webviewStyles"  :src="url" class="top-box"></web-view>
	</view>
</template>

<script>
		import { postDayVisitsUrl } from '@/common/request.js';
	export default {
		data() {
			return {
				url:'',
				show:true,
				webviewStyles: {
					progress: {
						color: '#FF3333'
					}
				}
			}
		},
		onLoad(options) {
			// console.log('--options--:',options)
			console.log('options.url:',options.url)
			console.log('options.title:',options.title)
			console.log('options.type:',options.type)
			postDayVisitsUrl(options.url,options.title,options.type);
			 
			let that = this;
			if (window.navigator.userAgent.indexOf('AlipayClient') != -1  || window.navigator.userAgent.indexOf('AlipayDefined') != -1   ) { // H5时，在微信内打开
				if(!!options.url)
				{
					that.url = options.url;
					setTimeout(function(){
						that.show = false;
					},500)
				}

			} else {

				setTimeout(function(){
					if(!!options.url)
					{
					  console.log(options.url)
						window.location.replace(options.url);
					}
				},500)
			}




			//location.href = options.url;
		},
		onReady() {
			// console.log(this)
			// var currentWebview = this.$mp.page.$getAppWebview(); //获取当前页面的webview对象,此对象相当于html5plus里的plus.webview.currentWebview()
			// setTimeout(function() {
			// 	let wv = currentWebview.children()[0];

			// 	wv.onloaded = () => {
			// 		// 拦截所有页面跳转，可使用参数拦截weibo.com域名之外的跳转（{mode:'allow',match:'.*weibo\.com/.*'}）
			// 		wv.overrideUrlLoading({ mode: 'reject',match:'*weibo\.com/.*' }, function(e) {
			// 			console.log('************url: '+e.url);

			// 		});
			// 	};
			// }, 1000); //如果是页面初始化调用时，需要延时一下

			// document.addEventListener('UniAppJSBridgeReady', ()=> {
			// 	$('body').on('click','a',function (e) {
			// 		if (/javascript/.test(this.href)){
			// 			return
			// 		}
			// 		e.stopPropagation();
			// 		e.preventDefault();
			// 		var href = this.href.replace(location.protocol + '//' +location.hostname,'');
			// 		var Reg = new RegExp('\/question\/\\d+','ig');
			// 		console.log(href)
			// 		if (Reg.test(href)){
			// 			uni.navigateTo({
			// 				url: '/pages/webview/webview?url=' + href.replace(/\/question\/(\d+?)/,'$1')
			// 			});
			// 		}
			// 	})
			// })
		},
		methods: {

		}

	}
</script>

<style >
	.top-box{
		min-height: 100vh;
		background-color: #fcfcfc;
	}
	.top{
		text-align: center;
		color: #333333;
		background-color: #fcfcfc;
		position: absolute;
		width: 100%;
		height: 100vh;
		z-index: 10;
	}
	.pswp__preloader__icn {
	  opacity:0.75;
	  width: 20vw;
	  height: 20vw;
	  -webkit-animation: clockwise 500ms linear infinite;
	  animation: clockwise 500ms linear infinite;
	  margin-left: calc(50% - 10vw);
	  margin-top: calc(50vh - 12vw);
	  margin-bottom: 40rpx;
	}

	/* The idea of animating inner circle is based on Polymer loading indicator by Keanu Lee https://blog.keanulee.com/2014/10/20/the-tale-of-three-spinners.html */
	.pswp__preloader__cut {
	  position: relative;
	  width: 10vw;
	  height: 20vw;
	  overflow: hidden;
	  position: absolute;
	  top: 0;
	  left: 0;
	}

	.pswp__preloader__donut {
	  box-sizing: border-box;
	  width: 20vw;
	  height: 20vw;
	  border: 3px solid #333333;
	   border-radius: 50%;
	  border-left-color: transparent;
	  border-bottom-color: transparent;
	  position: absolute;
	  top: 0;
	  left: 0;
	  background: none;
	  margin:0;
	   -webkit-animation: donut-rotate 1000ms cubic-bezier(.4,0,.22,1) infinite;
	  animation: donut-rotate 1000ms cubic-bezier(.4,0,.22,1) infinite;
	}

	@-webkit-keyframes clockwise {
	  0% { -webkit-transform: rotate(0deg) }
	  100% { -webkit-transform: rotate(360deg) }
	}
	@keyframes clockwise {
	  0% { transform: rotate(0deg) }
	  100% { transform: rotate(360deg) }
	}
	@-webkit-keyframes donut-rotate {
	  0% { -webkit-transform: rotate(0) }
	  50% { -webkit-transform: rotate(-140deg) }
	  100% { -webkit-transform: rotate(0) }
	}
	@keyframes donut-rotate {
	  0% { transform: rotate(0) }
	  50% { transform: rotate(-140deg) }
	  100% { transform: rotate(0) }
	}
	/*.top-box{margin-top: 100rpx;}*/
</style>
